<script setup lang="ts" name="SuppliedGoods">
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
import { graphic } from "echarts/core";
import { reqSupplierGoods } from '@/apis/supply'
import type { GoodsPercentResponseData, GoodsPercentList } from '@/apis/supply/type'
let myEcharts = ref();
let percentList = ref<GoodsPercentList>([]);
const echartsGraphic = (colors: string[]) => {
  return new graphic.LinearGradient(1, 0, 0, 0, [
    { offset: 0, color: colors[0] },
    { offset: 1, color: colors[1] },
  ]);
};
// 11组预设渐变色
let colorArr = [
  echartsGraphic(["#00B1C0", "#00FCFA"]),
  echartsGraphic(["#0BFC7F", "#A3FDE0"]),
  echartsGraphic(["#F48C02", "#FDDB7D"]),
  echartsGraphic(["#F4023C", "#FB6CB7"]),
  echartsGraphic(["#A0A0A0", "#DBDFDD"]),
  echartsGraphic(["#7A7A7A", "#878685"]),
  echartsGraphic(["#0ed1fb", "#76f4b2"]),
  echartsGraphic(["#9952f5", "#8ea7ce"]),
  echartsGraphic(["#e1429e", "#d292cc"]),
  echartsGraphic(["#f9c095", "#fc9898"]),
  echartsGraphic(["#fff000", "#f8af05"])
]
// 挂载
onMounted(() => {
  getSupplierGoods();
})
// 获取数据
async function getSupplierGoods() {
  const res: GoodsPercentResponseData = await reqSupplierGoods()
  if (res.code === 200) {
    percentList.value = res.data;
    let data = percentList.value.map((item, index) => {
      return {
        ...item,
        name: item.name.length > 20 ? item.name.slice(0, 20) + '...' : item.name,
        itemStyle: { color: colorArr[index] }
      }
    });
    console.log(percentList.value,'供应商品占比');

    initEcharts(data);
  }
}
// 初始化echarts
const initEcharts = (data: GoodsPercentList) => {
  const myChart = echarts.init(myEcharts.value);
  const option = {
    tooltip: {
      trigger: "item",
      backgroundColor: "rgba(0,0,0,.6)",
      borderColor: "rgba(147, 235, 248, .8)",
      textStyle: {
        color: "#FFF",
      }
    },
    // legend: {
    //   orient: 'horizontal',
    //   selectedMode: false, // 禁止点击
    //   bottom: '7%',
    //   textStyle: { // 图例文字样式
    //     color: '#fff', // 将图例文字颜色设置为白色
    //     fontSize: 14 // 字体大小
    //   }
    // },
    series: [
      {
        // name: '供应商品占比',
        type: 'pie',
        // radius: '70%',
        radius: ['45%', '70%'],
        itemStyle: {
          borderRadius: 5,
          borderWidth: 1
        },
        center: ['50%', '47%'],
        tooltip: { show: true },
        data,
        label: {
          formatter: "{c|{b}\n{c}%}",
          rich: {
            c: {
              color: "#fff",
              fontSize: 16,
            }
          },
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  option && myChart.setOption(option);
}
</script>
<template>
  <div class="echarts_dom">
    <div ref="myEcharts" style="width: 100%;height: 280px;"></div>
  </div>
</template>